<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		@keyframes cube-rot {
			from { transform: rotateX(-20deg) rotateY(0); }
			to { transform: rotateX(-20deg) rotateY(360deg); }
		}
		
		#centercube {
			margin-left: auto;
			margin-right: auto;
			margin-top: 50vh;
			transform: translateY(-50px);
		}
	
		#threedee {
			perspective: 800px;
			perspective-origin: 50px 50px;
		}
		
		#cube {
			position: relative;
			width: 100px;
			height: 100px;
			transform-style: preserve-3d;
			animation: cube-rot 2s infinite linear;
		}
		
		#cube div {
			position: absolute;
			width: 100px;
			height: 100px;
			background-image: url("side.png");
		}
		
		#front {
			transform: translateZ(50px);
			background-image: url("front.png") !important;
		}
		
		#back {
			transform: translateZ(-50px) rotateY(180deg);
		}
		
		#left {
			transform: translateX(-50px) rotateY(-90deg);
		}
		
		#right {
			transform: translateX(50px) rotateY(90deg);
		}
		
		#top {
			transform: translateY(-50px) rotateX(-90deg);
		}
		
		#wd {
			padding-left: 20px;
		}
	</style>
</head>
<body>
	<table id="centercube">
		<tr>
			<td id="threedee">
				<div id="cube">
					<div id="front"></div>
					<div id="back"></div>
					<div id="left"></div>
					<div id="right"></div>
					<div id="top"></div>
				</div>
			</td>
			<td id="wd">
				<img src="webdisplays.png" />
			</td>
		</tr>
	</table>
</body>
</html>
